<template>
	<view class="article-list mt20 flex-c">
		<template v-for="(article, index) in articleList">
			<view class="article-list-item mb20 flex-c" :key="article.id+index" v-if="article.displayType != 3" @tap="goDetail(article.displayType, article.id, index)">
				<!-- 专家信息 -->
				<view class="item-head flex-r ac" v-if="article.expertId">
					<view class="author-image border-round" @tap.stop="$CHS.goExpertHome(article.expertId)">
						<lazy-image class="inheritwh border-round" :src="article.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
						<view class="expert-note" v-if="article.saleArticleNum" :class="{'round': article.saleArticleNum < 10}">
							<text>{{article.saleArticleNum}}</text>
						</view>
					</view>
					<view class="author-info flex-c">
						<view class="info-top flex-r ac">
							<text class="text-secondary text-bold">{{article.expertName}}</text>
							<image class="icon" v-if="article.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
							<text class="tag-red ml20" v-if="article.hotContineTxt">{{article.hotContineTxt}}</text>
							<text class="tag-gold ml20" v-else-if="article.hitResultTxt">{{article.hitResultTxt}}</text>
							<!-- <text class="tag-season" :class="'rank'+article.rankTag" v-if="article.seasonRankTag">{{article.seasonRankTag}}</text> -->
						</view>
						<!-- <text class="text-info color-grey" v-if="article.expertTag">{{article.expertTag}}</text> -->
						<!-- <text class="text-info color-grey text-artivle" v-if="article.remark">{{article.remark.split(/[\t\r\f\n\s]*/g).join('')}}</text> -->
						<view class="tag">
							<text class="tag-season seasonRankTag" :class="'rank'+article.rankTag" v-if="article.seasonRankTag">{{article.seasonRankTag}}</text>
							<text class="tag-matchRed seasonRankTag"  v-if="article.seasonHotContineTxt">{{article.seasonHotContineTxt}}</text>
							<text class="tag-matchRed seasonRankTag"  v-else-if="article.seasonHitResultTxt">{{article.seasonHitResultTxt}}</text>
						</view>
					</view>
					<view class="author-result-score flex-c" v-if="Number(article.hitRate)>=60">
						<view class="result-score flex-r">
							<text>{{article.hitRate}}</text>
							<text>%</text>
						</view>
						<text class="result-des color-red">{{article.hitRateName}}</text>
					</view>
				</view>
				<!-- 内容主体 -->
				<view class="item-body flex-c">
					<view class="item-body-info flex-r ac">
						<view class="artitlce-title text-hidden two">
							<!-- <image :class="'type-'+article.displayType" :src="require('@/public/images/index/article_'+article.displayType+'.png')" mode="aspectFit"></image> -->
							<image src="@/public/images/index/spfa.png" class="spfa" mode="aspectFit" v-if="article.articleType ===2"></image>
							<text class="text-primary">{{article.title}}</text>
						</view>
						<view class="card-free" v-if="article.label != '0' && article.finish != 1 && !article.result">
							<image class="inheritwh" src="@/public/images/public/yxmd.png" mode="aspectFit" v-if="article.label == '1'"></image>
							<image class="inheritwh" src="@/public/images/public/flfa.png" mode="aspectFit" v-else-if="article.label == '2'"></image>
						</view>
					</view>
					<template v-if="article.displayType == 1">
						<!-- <ArticleMatch v-if="article.matchInfoList && article.matchInfoList[0]" :matchList="article.matchInfoList"></ArticleMatch> -->
						<keep-alive>
							<ArticleMatch v-if="article.matchInfoList && article.matchInfoList[0]" :matchList="article.matchInfoList"></ArticleMatch>
						</keep-alive>
						<template v-if="article.articleType==2">
							<view class="item-body-video" v-if="article.freeVideoUrl">
								<FullVideo :url="article.freeVideoUrl" :article="true" width="670rpx" height="376rpx"></FullVideo>
							</view>
							<!-- <view class="item-body-video" v-else>
								<FullVideo :poster="require('@/public/images/public/t1-ys.jpg')" :article="true" width="670rpx" height="376rpx" v-if="article.sportId == 1"></FullVideo>
								<FullVideo :poster="require('@/public/images/public/lqt-ys.jpg')" :article="true" width="670rpx" height="376rpx" v-else></FullVideo>
							</view> -->
						</template>
					</template>
				</view>
				<!-- 内容其他状态信息 -->
				<view class="item-foot flex-r ac jsb">
					<view class="item-foot-info text-info color-grey flex-r ac">
						<uni-dateformat :date="article.displayTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
						{{new Date() - new Date(article.displayTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
						<text class="views" v-if="article.virtualReadNum">{{article.virtualReadNum}}人查看</text>
					</view>
					<view class="item-foot-type text-info flex-r ac">
						<template v-if="article.displayType == 1">
							<text v-if="article.finish == 1 || article.result" class="color-blue">查看</text>
							<template v-else>
								<template v-if="article.enablePay === 1">
									<text class="type-info color-red" v-if="article.state != 2">
										{{article.state == 1 ? '不中返还' : article.state == 3 ? '不中补单' : ''}}
									</text>
									<view class="type-price flex-r ac">
										<text class="vip-price" v-if="article.label == '1' && article.avgBeanCard">优享价：{{article.avgBeanCard}}</text>
										<text class="fl-price color-red" v-else-if="article.label == '2'">福利价：{{article.benefitPrice}}</text>
										<text class="color-red" :class="{'delete': article.label == '2' || (article.label == '1' && article.avgBeanCard)}">{{article.payBeanValue}}</text>
										<image src="@/public/images/public/chd_dd.png" mode="aspectFit"></image>
									</view>
								</template>
								<text class="color-red" v-else>免费</text>
							</template>
						</template>
						<text class="color-blue" v-else>{{article.displayType == 2 ? '晒单详情' : '动态详情'}}</text>
					</view>
				</view>
				<!-- 优惠券活动 -->
				<view class="item-activity flex-r ac jsb thinborder-top" v-if="article.finish !== 1 && article.enablePay === 1 && article.label != '2' && user.couponActivity">
					<image class="icon-coupon" src="@/public/images/public/wzyh.png" mode="widthFix"></image>
					<view class="activity-bean flex-r ac">
						<text class="color-white text-info">5折价</text>
						<view class="bg-white color-red flex-r ac">
							<text class="text-small">{{ article.payBeanValue ? Math.ceil(article.payBeanValue * 0.5) : 0}}</text>
							<image class="icon-bean" src="@/public/images/public/chd_dd.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	/**
	 * ArticleMixin 首页混合列表
	 * @description 首页展示料与动态的混合列表
	 * @property {Array} list 列表数据
	 * @example <ArticleMixin :list="list"></ArticleMixin>
	 */
	export default {
		name:"ArticleMixin",
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				
			};
		},
		components: {
			ArticleMatch: () => import("@/components/ch-article/ch-articlematch.vue"),
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			articleList() {
				return this.list
			}
		},
		methods: {
			/**
			 * @description 进入详情
			 * @param {number} type 内容类型
			 * @param {string} id 内容ID
			 * @param {number} index 索引
			 */
			goDetail(type, id, index) {
				//监听更新数据阅读量
				uni.$once('readNum', (data)=>{
					this.articleList[index].virtualReadNum = data.num
				})
				if(type == 1){//料
					this.$CHS.goArticleDetail(id)
				}else if(type == 2){//晒单
					this.$CHS.goShareDetail(id)
				}else{//动态，已废弃
					this.$CHS.goDynamicDetail(id)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article-list{
		.article-list-item{
			background: #FFFFFF;
			border-radius: 10rpx;
			position: relative;
			.item-head{
				margin: 30rpx 20rpx 0;
				.author-image{
					position: relative;
					width: 80rpx;
					height: 80rpx;
					background-color: #FFFFFF;
				}
				.author-info{
					flex: 2;
					margin-left: 20rpx;
					.info-top{
						.icon{
							margin-left: 8rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}
					.text-info{
						margin-top: 15rpx;
					}
					.text-artivle{
						width: 420rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.tag{
						display: flex;						
					}
					.seasonRankTag{
						margin-top: 15rpx;
					}
				}
			}
			.item-body{
				z-index: 2;
				margin: 20rpx 20rpx 0;
				.item-body-info{
					position: relative;
					margin-bottom: 20rpx;
					width: 670rpx;
					.artitlce-title{
						z-index: 2;
						width: 670rpx;
						line-height: 42rpx;
						word-break: break-all;
						text-align: justify;
						.type-1{
							width: 80rpx;
						}
						.type-2, .type-3{
							width: 60rpx;
						}
						.type-1, .type-2, .type-3{
							height: 32rpx;
							vertical-align: middle;
							margin-top: -4rpx;
							margin-right: 20rpx;
							line-height: 42rpx;
						}
						.spfa{							
							width: 112rpx;
							height: 32rpx;
							vertical-align: text-bottom;
							margin-top: -4rpx;
							margin-right: 20rpx;
							line-height: 42rpx;
						}
					}				
					.card-free{
						position: absolute;
						right: 0;
						width: 83rpx;
						height: 82rpx;
						z-index: 1;
					}
				}
				.item-body-match{
					width: 670rpx;
					position: relative;
					background-color: #F4F8FF;
					border-radius: 4rpx;
					box-sizing: border-box;
					padding: 0 10rpx;
					margin-bottom: 20rpx;
					.match-list{
						width: 100%;
						.match{
							padding: 8rpx 0;
							.match-btn{
								height: 32rpx;
								background-color: #D9E5FF;
								border-radius: 4rpx;
								padding: 0 10rpx;
							}
							.match-info{
								max-width: 580rpx;
								margin-left: 10rpx;
								line-height: 32rpx;
							}
							&.border{
								position: relative;
							}
							&.border::before{
								position: absolute;
								top: 0;
								left: 0;
								content: "";
								height: 1px;
								width: 100%;
								background-color: #EDEDED;
								transform: scaleY(0.5);
							}
						}
					}
					.match-result{
						z-index: 1;
						position: absolute;
						right: 0;
						width: 100rpx;
						height: 100rpx;
					}
				}
				.item-body-video{
					margin: 20rpx 0 0;
					width: 670rpx;
					height: 376rpx;
					border-radius: 10rpx;
					.play{
						position: relative;
						image{
							border-radius: 10rpx;
						}
						.btn{
							position: absolute;
							width: 120rpx;
							height: 120rpx;
						}
					}
				}
			}
			.item-foot{
				margin: 20rpx 20rpx 30rpx;
				line-height: 24rpx;
				.item-foot-info{
					.views{
						margin-left: 20rpx;
					}
				}
				.item-foot-type{
					.type-info{
						margin-right: 15rpx;
					}
					.type-price{
						image{
							width: 24rpx;
							height: 24rpx;
							margin-left: 10rpx;
						}
						.delete{
							text-decoration:line-through;
						}
						.vip-price{
							color: #99681F;
							margin-right: 15rpx;
						}
						.fl-price{
							margin-right: 18rpx;
						}
					}
				}
			}
			.item-icon{
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
			.item-activity{
				margin: 0 20rpx;
				padding: 10rpx 0;
				//border-top: 1rpx solid #ededed;
				.icon-coupon{
					width: 292rpx;
					margin-left: -20rpx;
				}
				.activity-bean{
					height: 40rpx;
					border-radius: 4rpx;
					background-color: #F23030;
					.color-white{
						margin: 0 13rpx;
					}
					.bg-white{
						height: 36rpx;
						margin-right: 2rpx;
						border-radius: 0 4rpx 4rpx 0;
						background-color: #FFFFFF;
						.text-small{
							margin-left: 15rpx;
						}
						.icon-bean{
							width: 24rpx;
							height: 24rpx;
							margin-left: 10rpx;
							margin-right: 15rpx;
						}
					}
				}
			}
		}
	}
</style>